\documentclass[a4paper,10pt]{report}\input{../0.Préambule/Préambule_cours_prof}\input{0_Préambule_Intér}\begin{document}

\newpage
\setcounter{chapter}{5}
\chapter{Le langage HTML et CSS}

\section{Qu'est ce que le HTML?}

Quand on consulte un site web, notre ordinateur se connecte à un serveur distant et celui-ci lui envoie une page web, que le navigateur va pouvoir afficher.
En général la page est constituée de plusieurs fichiers :

\begin{enumerate}
\item[•] un fichier HTML (il existe d'autres formats qui seront étudiés plus tard : php, jsp, asp, …)
\item[•] un fichier CSS
\item[•] un fichier JS
\item[•] des images, du sons, ...
\end{enumerate}

Le plus important est celui dont l'extension est \og .html \fg{} ou \og .htm \fg{} .C'est lui qui contient toute la structure de la page et qui va indiquer au navigateur comment afficher la page. La première page d'un site doit s'appeler index.html !

La structure d'une page web est décrite à l'aide d'un langage de \textbf{balises} appelé \textbf{HTML} (HyperText Markup Language). On peut facilement afficher ces balises quand on navigue sur un site internet (on peut utiliser le raccourci \og ctrl+u \fg{} sous firefox par exemple).

\section{Les balises}

Une balise est un mot-clef permettant d'indiquer au navigateur ce qu'il doit faire avec le contenu. Les balises contrôlent tout. Elles permettent de gérer la structure, les images, les liens, la police d'affichage utilisée, les titres, $\cdots$

On écrit <balise> pour ouvrir une balise et </balise> pour la fermer. De manière générale, toute balise ouverte doit être fermée.

Voici la structure minimale (squelette) de toute page HTML :

\begin{minipage}{16cm}
\begin{html}
<!DOCTYPE html> <!-- langage utilisé, html pour html5 -->
<html lang="fr"> <!-- début de la page web -->
	<head> <!-- En tête de la page, la balise n'est pas affiché, mais elle permet de donner des informations telles que le titre de la page ou la police de caractères utilisée -->
    	<title> Le html en 1ère NSI</title>
        <meta charset="utf-8"/>
  </head>
  <body> <!-- Corps de la page, c'est ici que l'on écrit tout ce qui doit être affiché -->
  	<p> 
  		Bienvenue en cours de NSI.
  	</p>  	
  </body>
</html>
\end{html}
\end{minipage}

 Les balises \htmlinline{<!DOCTYPE>}, \htmlinline{<html></html>}, \htmlinline{<head></head>} et \htmlinline{<body></body>} sont obligatoires dans tout document HTML.

On peut remarquer que certaines balises particulières ne se ferment pas (comme la balise \htmlinline{<meta/>}). Dans ce cas il y a un \og / \fg{}  avant le \og > \fg{}  ?

\medskip
Le nom d'une balise s'appelle un élément (exemple ici \htmlinline{body}, \htmlinline{p} ou \htmlinline{meta}). Certains éléments peuvent avoir des attributs pour définir des paramètres. Dans ce cas les attributs sont toujours donnés entre guillemets " " ou apostrophes ‘ ’. De plus des balises peuvent être imbriquées les une dans les autres mais pas se chevaucher !

\begin{ex}

\begin{minipage}{13cm}
\begin{html}
  	<p> 
  		Bienvenue en <em> cours </em> de NSI.<br/> 
  		Ici les balises sont correctement imbriquées 
  	</p>
\end{html}
\end{minipage}

\noindent \begin{minipage}{13cm}
\begin{html}
  	<p> 
  		Bienvenue en <em> cours  de NSI.<br/> 
  		Problème, la balise em est fermé après la balise p !!
  	</p></em>  
\end{html}
\end{minipage}
\end{ex}

\section{Block / Inline}

Voici les éléments les plus courants mais il en existe d'autres. Ils peuvent être regroupées en deux catégories :
\begin{enumerate}
\item[•] les éléments de bloc (\textbf{block} en anglais) qui s'affichent comme un bloc (saut de ligne avant et après automatiquement),
\item[•] les éléments en ligne (\textbf{inline} en anglais) qui s'affichent dans la ligne courante. Un élément inline doit obligatoirement être à l'intérieur d'un bloc.
\end{enumerate}

\paragraph{Balises de type block} :

\begin{minipage}{12.5cm}
\begin{html}
...
	<body>
			<p>
				Un paragraphe
  		</p>
  		<h1>
  			Un titre de premier niveau
  		</h1>
  		<h2>
  			Un titre de niveau 2
  		</h2>
  		<ul> <!-- une liste à puce (Unordered List) -->
  			<li> Premier élément de la liste à puce </li>
  			<li> Deuxième élément de la liste à puce </li>
  		</ul>
  		<ol> <!-- une liste numérotée (Ordered List) -->
  			<li> Premier élément de la liste numérotée </li>
  			<li> Deuxième élément de la liste numérotée </li>
  		</ol>
  		<div>
  			Un bloc quelconque, utile pour la mise en forme
  		</div>
	</body> 	
</html> 	
\end{html}
\end{minipage}

Pour visualiser la page, cliquer \href{https://www.axelnax.fr/pages/NSI/Block.html}{ici}

\paragraph{Balises type inline} :

\begin{center}
\renewcommand{\arraystretch}{1.3}
\begin{tabular}{|c|c|c|}
\hline
\rowcolor{titlecolor!20} Balise & Fonction & Attributs utiles \\\hline
\htmlinline{<br/>} & Retour à la ligne & \\\hline
\htmlinline{<img/>} & Permet d'insérer une image & $\bullet$ src = 'emplacement de l'image'\\
 &  & $\bullet$ alt = 'texte à afficher si problème'\\\hline
 \htmlinline{<a>} & Ancre, permet de créer un lien & $\bullet$ name = 'nom de l'ancre'\\
 &  & $\bullet$ href = 'lien'\\\hline
\end{tabular}
\end{center}

\begin{ex}

\begin{minipage}{13cm}
\begin{html}
...
	<body>
  		<h1>
  			Un exemple avec des éléments inline
  		</h1>
  		<p>
  			Voici un paragraphe. Pas d'élément &lt; br/&gt; donc pas de retour à la ligne.<br/>
  			Après la balise une nouvelle ligne commence.<br/>
  			Une ligne avec une image : <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcROTQuLKb3LDxIrGiuC6wowhIxugJ3OY46bHA&usqp=CAU' alt='Mon image'/><br/>
  			Et maintenant un lien vers un autre site : <a href='https://www.axelnax.fr/'> Le site du prof ! </a>
  		</p>
	</body> 	
</html> 
\end{html}
\end{minipage}

Pour visualiser la page, cliquer \href{https://www.axelnax.fr/pages/NSI/Inline.html}{ici}
\end{ex}

\section{Et le CSS alors ?}

Un fichier ‘.css’ (cascading style sheet) accompagne souvent une page html. Il sert à définir tout ce qui concerne la forme du document (là où la partie HTML s'occupe plutôt du contenu). Il gère donc la taille de la police, la couleur, le positionnement des blocs, des images, ...

\medskip
Exemple de page internet \href{https://www.axelnax.fr/pages/NSI/SansCSS.php}{sans} CSS et \href{https://www.axelnax.fr/}{avec} CSS.

\medskip
Un fichier contenant du code CSS permet de donner des informations sur la forme que doit avoir une page internet (couleur de la police, position et taille des images, fond de page, menus, …). Ce fichier peut avoir le nom que l'on souhaite (on utilisera néanmoins préféremment l'extension .css). Dans notre exemple ce fichier s'appellera \og style.css \fg{}.

\medskip
Modifications à apporter dans le fichier HTML :
\begin{enumerate}
\item[•] il faut donner le nom (et le chemin si nécessaire) du(des) fichier(s) CSS à utiliser. Cela se fait à l'aide de la balise suivante dans l'en-tête : \htmlinline{<link href="style.css" rel="stylesheet" type="text/css">}
\item[•] on peut maintenant utiliser $2$ nouveaux attributs dans les balises HTML,
\begin{enumerate}
\item[•] \htmlinline{id="nomUnique"} : permet de donner un nom unique à un élément pour lui appliquer un style particulier,
\item[•] \htmlinline{class="nom"} : permet de donner le même nom à un ensemble d'éléments auxquels on veut appliquer le même style.
\end{enumerate}
\end{enumerate}

\medskip
Dans le fichier CSS on peut maintenant créer un ensemble de règles à appliquer. 
Une règle est composée d'un sélecteur (l'objet auquel la règle doit s'appliquer) et de déclarations de propriétés. Les déclarations se trouvent entre accolades et les propriétés sont séparées par des points-virgules.

\medskip
Il y a beaucoup de sélecteurs différents, les plus courants sont :
\begin{enumerate}
\item[•] le nom d'un type d'éléments (ex : \htmlinline{html, p, body, h1, img, ...}) : la règle s'applique à tous les éléments de la page de ce type,
\item[•] le nom d'un id précédé d'un \# : la règle s'applique au seul élément ayant cet id,
\item[•] le nom d'une classe précédé d'un point : la règle s'applique à tous les éléments ayant cette classe, qu'importe le type.
\end{enumerate}

On peut mélanger plusieurs sélecteurs pour une même règle.

Il existe une très grande variété de propriétés, la liste dépendant du sélecteur choisi !

\begin{ex}

\begin{minipage}{17cm}
\begin{html}
<!DOCTYPE html> <!-- langage utilisé, html pour html5 -->
<html lang="fr"> <!-- début de la page web -->
	<head> <!-- En tête de la page, la balise n'est pas affiché, mais elle permet de donner des informations telles que le titre de la page ou la police de caractères utilisée -->
    	<title> Le CSS en 1ère NSI</title>
        <meta charset="utf-8"/>
        <link rel="stylesheet" href="style.css"> <!-- import le CSS de la page cible -->
  </head>
  <body> 
  <h1>Un joli titre centrée, en rouge et en italique.</h1>
  	<p>
  		Un beau paragraphe générique.
  	</p>
  	<p class="important">
  		Un paragraphe de la classe "important" que je vais faire apparaitre en gras.
  	</p>
  	<p>
  		Un paragraphe normal dans lequel <a href="https://www.axelnax.fr/" class="important"> le lien est important </a>.
  	</p>
  	<p id="fin">
  		Un paragraphe unique avec le texte en bleu.
  	</p>
  	<img src="http://www.lyc-descartes-montigny.ac-versailles.fr/wp-content/uploads/sites/57/2016/01/Academie_Versailles.png" alt="logo Académie de Versailles" id="logo"/>
  </body>
</html>
\end{html}
\end{minipage}

\noindent\begin{minipage}{17cm}
\begin{css}
body{
	font-family: helvetica, arial, sans-serif;
	margin: 2em;
	background-color: beige;
}
h1{ /* tous les titres h1 */
	font-style: italic;
	text-align: center;
	color: red;
}
p{ /* tous les paragraphes */
	margin-left: 280px;
}
#fin{ /* l'unique élément d'id fin */
	color: darkblue;
}
.important{/* tous les éléments de la classe important */
	font-weight: bold;
}
img#logo{/* élément img avec l'id logo */
	display: block;
	border-radius: 20px;
	width: 150px;
	margin-left: auto;
	left: 20px;
	top: 20px;
	position: fixed;
}
\end{css}
\end{minipage}

Rendu des pages \href{https://www.axelnax.fr/pages/NSI/SCSS.html}{sans} CSS et \href{https://www.axelnax.fr/pages/NSI/CSS.html}{avec} CSS.
\end{ex}

\section{CSS et les boites}

Tous les éléments HTML de type block sont manipulés en tant que boites par CSS. Il existe une propriété display en CSS pour transformer n'importe quel élément en type block (ou autre) si on le souhaite.

\medskip
Voici les différentes propriétés d'une boite en CSS :

\vspace{-1cm}
\begin{center}
\definecolor{ffffff}{rgb}{1.,1.,1.}
\definecolor{ccqqqq}{rgb}{0.8,0.,0.}
\begin{tikzpicture}[line cap=round,line join=round,>=triangle 45,x=1.0cm,y=1.0cm]
\clip(-2.,0.) rectangle (14.,13.);
\fill[line width=0.pt,color=ccqqqq,fill=ccqqqq,fill opacity=0.3333333333333333] (1.,10.) -- (1.,3.) -- (11.,3.) -- (11.,10.) -- cycle;
\fill[line width=0.pt,color=ccqqqq,fill=ccqqqq,fill opacity=0.3333333333333333] (2.,9.) -- (2.,4.) -- (10.,4.) -- (10.,9.) -- cycle;
\fill[line width=0.pt,color=ccqqqq,fill=ccqqqq,fill opacity=0.3333333333333333] (3.,8.) -- (3.,5.) -- (9.,5.) -- (9.,8.) -- cycle;
\fill[line width=0.pt,color=ccqqqq,fill=ccqqqq,fill opacity=0.3333333333333333] (0.,11.) -- (0.,2.) -- (12.,2.) -- (12.,11.) -- cycle;
\draw [<->,line width=2.pt,color=white] (4.,8.)-- (4.,5.);
\draw [<->,line width=2.pt,color=white] (3.,6.)-- (9.,6.);
\draw [->,line width=2.pt] (0.,0.) -- (0.,2.);
\draw [->,line width=2.pt] (-2.,11.) -- (0.,11.);
\draw [->,line width=2.pt] (12.,13.) -- (12.,11.);
\draw [->,line width=2.pt] (14.,2.) -- (12.,2.);
\begin{scriptsize}
\draw[color=white] (5,7) node {\large{height}};
\draw[color=white] (6.5,5.5) node {\large{width}};
\draw[color=black] (-1,1) node {\large{left}};
\draw[color=black] (-1,11.5) node {\large{top}};
\draw[color=black] (13,12) node {\large{right}};
\draw[color=black] (13,2.5) node {\large{bottom}};
\draw[color=white] (6,10.5) node {\large{margin-top}};
\draw[color=white] (11.5,6.5) node[rotate=90] {\large{margin-right}};
\draw[color=white] (0.5,6.5) node[rotate=90] {\large{margin-left}};
\draw[color=white] (6,2.5) node {\large{margin-bottom}};
\draw[color=white] (6,9.5) node {\large{border-top}};
\draw[color=white] (10.5,6.5) node[rotate=90] {\large{border - right}};
\draw[color=white] (1.5,6.5) node[rotate=90] {\large{border-left}};
\draw[color=white] (6,3.5) node {\large{border-bottom}};
\draw[color=white] (6,8.5) node {\large{padding-top}};
\draw[color=white] (9.5,6.5) node[rotate=90] {\large{padding-right}};
\draw[color=white] (2.5,6.5) node[rotate=90] {\large{padding-left}};
\draw[color=white] (6,4.5) node {\large{padding-bottom}};
\end{scriptsize}
\end{tikzpicture}
\end{center}

\begin{minipage}{9cm}
La zone centrale représente le contenu, le padding est l'écart entre le contenu et la bordure, le margin est l'écart avec le bord extérieur de la boite.

\medskip
La position d'un élément peut être définie avec la propriété position. Elle peut être relative à la place de l'élément dans le flux de la page ou absolute, c'est à dire définie directement par rapport au bord de la fenêtre.

\medskip
L'ensemble de ces propriétés, associées aux éléments div, header, nav, section, article, aside et footer permet de construire une belle mise en page en HTML.

\medskip
Voici un exemple avec un en-tête de page, une barre de navigation, un pied de page et une colonne de menus (à droite de la page dans cet exemple).
\end{minipage}
\hspace{10mm}
\begin{minipage}{7cm}
\definecolor{dqfqcq}{rgb}{0.8156862745098039,0.9411764705882353,0.7529411764705882}
\definecolor{zzccff}{rgb}{0.6,0.8,1.}
\definecolor{cqcqcq}{rgb}{0.7529411764705882,0.7529411764705882,0.7529411764705882}
\begin{tikzpicture}[line cap=round,line join=round,>=triangle 45,x=1.0cm,y=1.0cm,scale=0.9]
\clip(2.,3.75) rectangle (9.,14.);
\fill[line width=2.pt,color=cqcqcq,fill=cqcqcq,fill opacity=1.0] (2.,14.) -- (9.,14.) -- (9.,13.) -- (2.,13.) -- cycle;
\fill[line width=2.pt,color=zzccff,fill=zzccff,fill opacity=1.0] (2.,12.7) -- (9.,12.7) -- (9.,11.8) -- (2.,11.8) -- cycle;
\fill[line width=2.pt,color=cqcqcq,fill=cqcqcq,fill opacity=1.0] (2.,11.5) -- (2.,5.) -- (7.,5.) -- (7.,11.5) -- cycle;
\fill[line width=2.pt,color=dqfqcq,fill=dqfqcq,fill opacity=1.0] (7.3,11.5) -- (9.,11.5) -- (9.,5.) -- (7.3,5.) -- cycle;
\fill[line width=2.pt,color=zzccff,fill=zzccff,fill opacity=1.0] (2.,4.7) -- (9.,4.7) -- (9.,3.8) -- (2.,3.8) -- cycle;
\fill[line width=2.pt,color=zzccff,fill=zzccff,fill opacity=1.0] (2.5,9.5) -- (6.5,9.5) -- (6.5,8.5) -- (2.5,8.5) -- cycle;
\fill[line width=2.pt,color=zzccff,fill=zzccff,fill opacity=1.0] (2.5,8.) -- (6.5,8.) -- (6.5,7.) -- (2.5,7.) -- cycle;
\fill[line width=2.pt,color=zzccff,fill=zzccff,fill opacity=1.0] (2.5,6.5) -- (6.5,6.5) -- (6.5,5.5) -- (2.5,5.5) -- cycle;
\draw [line width=2.pt,color=cqcqcq] (2.,14.)-- (9.,14.);
\draw [line width=2.pt,color=cqcqcq] (9.,14.)-- (9.,13.);
\draw [line width=2.pt,color=cqcqcq] (9.,13.)-- (2.,13.);
\draw [line width=2.pt,color=cqcqcq] (2.,13.)-- (2.,14.);
\draw [line width=2.pt,color=zzccff] (2.,12.7)-- (9.,12.7);
\draw [line width=2.pt,color=zzccff] (9.,12.7)-- (9.,11.8);
\draw [line width=2.pt,color=zzccff] (9.,11.8)-- (2.,11.8);
\draw [line width=2.pt,color=zzccff] (2.,11.8)-- (2.,12.7);
\draw [line width=2.pt,color=cqcqcq] (2.,11.5)-- (2.,5.);
\draw [line width=2.pt,color=cqcqcq] (2.,5.)-- (7.,5.);
\draw [line width=2.pt,color=cqcqcq] (7.,5.)-- (7.,11.5);
\draw [line width=2.pt,color=cqcqcq] (7.,11.5)-- (2.,11.5);
\draw [line width=2.pt,color=dqfqcq] (7.3,11.5)-- (9.,11.5);
\draw [line width=2.pt,color=dqfqcq] (9.,11.5)-- (9.,5.);
\draw [line width=2.pt,color=dqfqcq] (9.,5.)-- (7.3,5.);
\draw [line width=2.pt,color=dqfqcq] (7.3,5.)-- (7.3,11.5);
\draw [line width=2.pt,color=zzccff] (2.,4.7)-- (9.,4.7);
\draw [line width=2.pt,color=zzccff] (9.,4.7)-- (9.,3.8);
\draw [line width=2.pt,color=zzccff] (9.,3.8)-- (2.,3.8);
\draw [line width=2.pt,color=zzccff] (2.,3.8)-- (2.,4.7);
\draw [line width=2.pt,color=zzccff] (2.5,9.5)-- (6.5,9.5);
\draw [line width=2.pt,color=zzccff] (6.5,9.5)-- (6.5,8.5);
\draw [line width=2.pt,color=zzccff] (6.5,8.5)-- (2.5,8.5);
\draw [line width=2.pt,color=zzccff] (2.5,8.5)-- (2.5,9.5);
\draw [line width=2.pt,color=zzccff] (2.5,8.)-- (6.5,8.);
\draw [line width=2.pt,color=zzccff] (6.5,8.)-- (6.5,7.);
\draw [line width=2.pt,color=zzccff] (6.5,7.)-- (2.5,7.);
\draw [line width=2.pt,color=zzccff] (2.5,7.)-- (2.5,8.);
\draw [line width=2.pt,color=zzccff] (2.5,6.5)-- (6.5,6.5);
\draw [line width=2.pt,color=zzccff] (6.5,6.5)-- (6.5,5.5);
\draw [line width=2.pt,color=zzccff] (6.5,5.5)-- (2.5,5.5);
\draw [line width=2.pt,color=zzccff] (2.5,5.5)-- (2.5,6.5);
\begin{scriptsize}
\draw[color=black] (5.5,13.5) node {\large{<header>}};
\draw[color=black] (5.5,12.2) node {\large{<nav>}};
\draw[color=black] (4.5,10.6) node {\large{<section>}};
\draw[color=black] (4.5,9) node {\large{<article>}};
\draw[color=black] (4.5,7.5) node {\large{<article>}};
\draw[color=black] (4.5,6) node {\large{<article>}};
\draw[color=black] (8.15,10.6) node {\large{<aside>}};
\draw[color=black] (5.5,4.3) node {\large{<footer>}};
\end{scriptsize}
\end{tikzpicture}
\end{minipage}

\newpage
\begin{ex}
Une version sans la barre de navigation :

\noindent\begin{minipage}{7cm}
Le code CSS correspondant :
\begin{css}
html {
  height: 100%;
  box-sizing: border-box;
}
body {
  box-sizing: border-box;
  font-family: helvetica, arial, sans-serif;
  margin: 0em;
  background-color: beige;
  min-height: 100%;
  padding-bottom: 30px;
}
section {
  padding: 20px;
  height: auto;
  float: left;
  width: 85%;
}
header {
  height : 5%;
  padding: 20px;
  text-align: center;
  background-color: grey;
}
footer {
  height : 30px;
  padding: 10px;
  text-align: center;
  background-color: grey;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  clear: both;
}
aside {
  padding: 10px;
  float: right;
  width: 10%;
}
h4 {
  text-align: center;
}
\end{css}
\end{minipage}
\noindent\begin{minipage}{10cm}
Et le code HTML associé :

\begin{html}
<!DOCTYPE html>
<html lang="fr">
  <head>
    <title>NSI : CSS</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="style1.css" />
  </head>
  <body>
    <header>
      Une jolie bannière, un menu, ... 
    </header>
    <section>
      <article>
        <h1>Contenu 1</h1>
        Voici le contenu de la page, on peut le faire changer grâce aux liens
        par exemple.
      </article>
      <article>
        <h1>Contenu 2</h1>
        Il peut y a voir plusieurs articles
      </article>
      <article>
        <h1>Contenu 3</h1>
        L'informaticien logiciel et programmation.<br />
        Le travail d'un  ... 
		Il propose également des ...
    <br />
        <br />
        Source : wikipédia
      </article>
    </section>
    <aside>
      <h4>Un menu</h4>
      <ul>
        <li><a href="">Page 1</a></li>
        <li><a href="">Page 2</a></li>
        <li><a href="">Page 3</a></li>
      </ul>
    </aside>
    <footer>
      Un pied de page ...
    </footer>
  </body>
</html>
\end{html}
\end{minipage}
\end{ex}

On peut voir le rendu \href{https://www.axelnax.fr/pages/NSI/Ex4.html}{ici}

\end{document}
